<template>
    <div class="db-left-content dlc1 bg">
        <div class="ta-c logo"><a v-link="'/'"><img src="../../assets/img/logo/full.png"></a></div>
        <div class="dbl-projects hide">
            <div class="db-left-search">
                <div class="cb">
                    <div class="fl"><i class="iconfont icon-sousuo"></i></div>
                    <div class="fl">
                        <input type="text" v-model="filter" value="{{filter}}" placeholder="快速查找项目">
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <br/>
            <ul >
                <li class="db-item" style="hover:none"><a v-link="{path:'/add'}" class="bd-add">
                    <i class="iconfont icon-add-circle"></i>创建系统</a></li>
                <li class="line"></li>
                <li  class="bd-project-title">常用项目</li>
                <li class="db-item" v-for="item in systems | filterBy 'YES' in 'commonlyUsed'">
                    <a v-link="{ path: '/project/'+item.id}"><i class="iconfont icon-projects"></i>{{item.name}}</a>
                    <a class="shoucang"><i v-on:click="toggle(item)" class="iconfont icon-biaoxingfill"></i></a>
                </li>
                <li class="bd-project-title">我的系统</li>
                <li class="db-item"  v-for="(index,system) in system_list ">
                    <div style="width:245px;">
                        <div class="project_list" style="padding-left:0px;width:100%;">
                            <i class="iconfont icon-projects"></i><a @click="doSystemChanged(index,system.system_id)">{{system.system_name}}</a>
                            <!--<a class="shoucang"><i v-on:click="toggle(item)" v-bind:class="{'icon-biaoxingfill':item.commonlyUsed=='YES','icon-biaoxing':item.commonlyUsed=='NO'}" class="iconfont "></i></a>-->
                            <a style="height:20px; " class="shoucang" v-link="{path:'/add'}"><i class="iconfont icon-tianjia" style="float:right;" ></i></a>
                        </div>
                        <div >
                            <ul >
                                <li style="padding-left:40px;padding-top:10px;"   v-for="project in system.project_list ">
                                    <a style="width:160px;" v-link="{ path: '/project/'+project.project_id,params:{name:project.project_name}}">{{project.project_name}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="dbl-userinfo">
            <br/>
            <br/>
            <br/>
            <br/>
            <ul>
                <li class="db-item">
                    <a v-link="{ path: '/profile'}"><i class="iconfont icon-projects"></i>个人信息</a>
                </li>
                <li class="db-item">
                    <a v-link="{ path: '/profile/security'}"><i class="iconfont icon-safe"></i>安全设置</a>
                </li>
                <li class="db-item">
                    <a v-link="{ path: '/profile/relation'}"><i class="iconfont icon-relation"></i>关联账户</a>
                </li>
                <li class="db-item">
                    <a v-on:click.stop.prevent="logout"><i class="iconfont icon-logout"></i>退出登录</a>
                </li>

            </ul>
        </div>
    </div>

    <div class="dlc2 bg">
        <div class="db-left-bar">
            <div class="logo ta-c"><a v-link="'/'"><img src="../../assets/img/b1.jpg"></a></div>
            <br/>
            <br/>
            <br/>
            <ul>
                <li class="db-item ta-c"><a  v-link="{path:'/add'}"><i class="iconfont icon-add-circle"></i></a></li>
                <li class="db-item ta-c" v-on:click="showContent=!showContent"><a><i class="iconfont icon-projects" v-bind:class="{'active':showContent}"></i></a></li>
            </ul>
        </div>

        <div class="db-left-content" v-show="showContent">
            <div class="ta-c logo"><a href="/"><img src="../../assets/img/logo/full.png"></a></div>

            <div class="db-left-search">
                <div class="cb">
                    <div class="fl"><i class="iconfont icon-sousuo"></i></div>
                    <div class="fl">
                        <input type="text" placeholder="快速查找项目" value="{{filter}}" v-model="filter">
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <br/>
			<ul>
                <li class="db-item"><a v-link="{path:'/add'}" class="bd-add">
                    <i class="iconfont icon-add-circle"></i>创建项目2</a></li>
                <li class="line"></li>
                <li class="bd-project-title">常用项目</li>
                <li class="db-item" v-for="item in systems | filterBy 'YES' in 'commonlyUsed'">
                    <a v-link="{ path: '/project/'+item.id}"><i class="iconfont icon-projects"></i>{{item.name}}</a>
                    <a class="shoucang"><i v-on:click="toggle(item)" class="iconfont icon-biaoxingfill"></i></a>
                </li>
                <li class="bd-project-title">我的项目</li>
                <li class="db-item" v-for="item in systems   | filterBy filter in 'name'">
                    <a v-link="{ path: '/project/'+item.id,params:{name:item.name}}"><i class="iconfont icon-projects"></i>{{item.name}}</a>
                    <a class="shoucang"><i v-on:click="toggle(item)" v-bind:class="{'icon-biaoxingfill':item.commonlyUsed=='YES','icon-biaoxing':item.commonlyUsed=='NO'}" class="iconfont "></i></a>
                </li>
            </ul>

        </div>
        <div class="db-left-layer" v-bind:class="{'hide':!showContent}" v-on:click="showContent=false" >1</div>
    </div>
</template>
<script>
    import utils from '../../src/utils.js';
    var data={
        showContent:false,
        system_list:[],
        filter:''
    };
    function load(self){
        utils.get('/project/list.json',{},function(rs){
            data.system_list=rs.data.system_list;
        },null,function(rs){
            if (location.href.indexOf('/project/demo') != -1 || location.href.indexOf('/share/') != -1)
                return true;
            return false;
        });
    }
    export default{
        name:"left-nav",
        data: function () {
            return data;
        },
        created:function(){
            load(this);
        },
        watch:{
            "reloadProject":function(value){
                alert(1);
                if(value){
                    load(this);
                    this.reloadProject = false;
                }
            }
        },
        computed:{
        },
        methods: {
            logout:function(){
                utils.logout();
            },
            doSystemChanged:function(index,system_id){
                this.$router.app.$children[2].doSystemChanged(index,system_id);
            },
            toggle:function(item){
                if(item.commonlyUsed=='YES'){
                	item.commonlyUsed='NO';
                	utils.post('/project/'+ item.id + '/commonly.json',{isCommonlyUsed:'NO'});
                } else {
                	item.commonlyUsed='YES';
                	utils.post('/project/'+ item.id + '/commonly.json',{isCommonlyUsed:'YES'});
                }                            

            }
        }
    }
</script>